<style>
    #log {
        height: calc(100% - -5px);
        overflow: auto;
    }
    
    .w80 {
        width: 80px;
    }
</style>
<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 36px);">
    <div class="layuimini-main" style="height: 100%;">
        <div style="margin: 10px;float: right;">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn w80" lay-event="download"> 下载 </button>
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn w80" lay-event="refresh"> 刷新 </button>
        </div>
        <fieldset class="table-search-fieldset" style="clear: both;height: calc(100% - 70px);">
            <legend>日志</legend>
            <div id="log">

            </div>
        </fieldset>
    </div>
</div>

<script>
    layui.use(['form', 'table', 'miniPage', 'element'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;


        var logUrl = "/xapi/dmesg"
        getLogData();
        $("button[lay-event='download']").click(function() {
            downloade(logUrl)
        })
        $("button[lay-event='refresh']").click(function() {
            getLogData()
        })

        function downloade(href) {
            const a = document.createElement('a');
            a.setAttribute('href', href);
            a.setAttribute('download', "log");
            a.click();
        }

        function getLogData() {
            $("#log").empty();
            $.ajax({
                url: logUrl + "?time=" + +new Date(),
                type: "GET",
                success: function(data) {
                    $("#log").append(data.split("\r\n").map(e => `<pre>${e}</pre>`))
                },
            });
        }
    });
</script>